
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1.0,user-scalable=no">
    <title>注册瑞联盟</title>
    <script src="../../js/jquery.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            background: #F4F4F4;
        }
        .content {
            width: 100%;
            height: 100%;
            background: url(../../images/login/register/registerBg.png) no-repeat;
            display: block;
            background-size: cover;
            margin: 0 auto;
            box-sizing: border-box;
            overflow: hidden;
        }
        .img01 {
            width: 90%;
            margin-top: 60px;
            margin-left: 5%;
            margin-right: 5%;
        }
        .img02 {
            width: 90%;
            margin-top: -70px;
            margin-left: 5%;
            margin-right: 5%;
        }
        .download-link {
            text-align: center;
        }
        .download-link-btn {
            color: #000000;
            font-size: 0.32rem;
            border-radius: 19px;
            border: 0;
            background: linear-gradient(to bottom, #FBE111, #FD9530);
            width: 140px;
            height:38px;
        }
        .userInfoBg {
            margin-top: -75px;
            margin-left: 5%;
            margin-right: 5%;
            height: 350px;
            border-radius: 15px;
            background-color: #f99e46;
            position: relative;
            border: 1px solid #f99e46;
        }
        .userInfoWhiteBg {
            margin-top: 2.5%;
            margin-left: 2.5%;
            border-radius: 10px;
            width: 95%;
            height: 95%;
            background-color: #FFFFFF;
            position: absolute;
        }
        .referrer {
            font-size: 20px;
            text-align: center;
        }
        .inputDiv {
            display: flex;
            height: 0.8rem;
            line-height: 0.8rem;
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 10px;
            align-items: center;
        }
        .inputDivBgColor {
            background: #ECF1FE;
            border-radius: 5px;
        }
        .form-input {
            font-size: 15px;
            color: #555555;
        }
        .phoneValue{
            flex: 1;
            border-width: 0;
            outline-width: 0;
            height: 0.8rem;
            background: #ECF1FE;
            padding-left: 10px;
            border-radius: 5px;
        }
        .codeValue{
            flex: 1;
            border-width: 0;
            outline-width: 0;
            height: 0.8rem;
            width: 60%;
            background: #ECF1FE;
            padding-left: 10px;
            border-radius: 5px;
        }
        .getCode {
            font-size: 15px;
            background: #FBE111;
            margin-left: 5%;
            width: 35%;
            height:0.8rem;
            border-radius: 5px;
            text-align: center;
            line-height: 0.8rem;
            text-decoration: none;
            color: #000;
        }
        .pwdValue {
            flex: 1;
            border-width: 0;
            outline-width: 0;
            height: 0.6rem;
            padding-left: 10px;
            border-radius: 5px;
            background: #ECF1FE;
        }
        .pwd-show-btn {
            margin-right: 5px;
            display: block;
            width: 0.55rem;
            height: 0.25rem;
            background: url(../../images/login/register/close_icon.png) no-repeat;
            background-size: contain;
        }
        .pwd-show {
            background: url(../../images/login/register/open_icon.png) no-repeat;
            background-size: contain;
        }
        .protocol {
            display: flex;
            font-size: 12px;
            padding-left: 20px;
            margin-top: 10px;
        }
        .link {
            color: red;
            text-decoration: none;
        }
        .unselected-btn {
            background: url("../../images/login/register/checkbox.png") no-repeat;
            display: block;
            width: 20px;
            height: 15px;
        }
        .selected-btn {
            background: url("../../images/login/register/checkbox_click.png") no-repeat;
            display: block;
            width: 20px;
            height: 15px;
        }
        .btnDiv{
            display: flex;
            height: 0.8rem;
            line-height: 0.8rem;
            margin: 0.3rem 0.5rem 0.38rem 0.5rem;
        }
        .submitReg{
            flex: 1;
            color: #000;
            font-size: 0.36rem;
            border: 0;
            border-radius: 0.4rem;
            background: linear-gradient(to bottom, #FBE111, #FD9530);
        }
        ::-webkit-input-placeholder {
            color: #BFBBC6;
        }
        /*屏幕适配*/
        @media only screen and (max-width: 350px) {

        }

        @media only screen and (min-width: 350px) and (max-width: 400px) {

        }

        @media only screen and (min-width: 400px){

        }

        @media only screen and (max-height: 780px){
            .content {
                height: 780px;
            }
        }
        @media only screen and (min-width: 375px) and (max-width: 415px){
            .content {
                height: 850px;
            }
        }
    </style>
    <script type="text/javascript">
        (function(){
            var d = document.documentElement;
            var cw = d.clientWidth || 750;

            document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
        })();
        (function(){
            window.alert = function(name){
                var iframe = document.createElement("IFRAME");
                iframe.style.display="none";
                iframe.setAttribute("src", 'data:text/plain');
                document.documentElement.appendChild(iframe);
                window.frames[0].window.alert(name);
                iframe.parentNode.removeChild(iframe);
            }
        })();

        /**
         * 获取连接参数
         * @param fromUser 推荐码
         */
        function getLinkParams(){
            if(location.search === '') {
                return "";
            }
            var linkParams = location.search.split('?')[1];
            var paramsArray = linkParams.split('&');
            var paramsMap = {};

            $(paramsArray).map(function(i, b) {
                var queryList = b.split('=');
                paramsMap[queryList[0]] = queryList[1];
            });

            /** 邀请人信息 */
            $('.referrerName').text(decodeURI(paramsMap.uName));

            return paramsMap;
        }

        /** 校验手机号 */
        function checkMobile(phone) {
            var regex = /^[1][0-9][0-9]{9}$/;
            if (!regex.test(phone)) {
                alert('请输入正确手机号');
                return false;
            }
            return true;
        }

        /** 校验短信验证码 */
        function checkValidCode(smscode) {
            var regex = /^\d{6}$/;
            if(!regex.test(smscode)){
                alert('请输入验证码');
                return false;
            }
            return true;
        }

        /** 校验密码 */
        function checkPwd(pwd) {
//            var regex = /^[\w\S~.!@#$%^&*?]{6,16}$/;
            if(pwd.length < 6 || pwd.length > 16){
                alert('请输入6到16位的密码');
                return false;
            }
            return true;
        }

        $(function () {
            var linkParam = getLinkParams();
            //明文密文切换
            $('.pwd-show-btn').click(function() {
                if($(this).hasClass('pwd-show')) {
                    $(this).removeClass('pwd-show');
                    $('.pwdValue').attr('type', 'password');
                } else {
                    $(this).addClass('pwd-show');
                    $('.pwdValue').attr('type', 'input');
                }
            });

            var isSelected = false;
            //协议勾选
            $('.unselected-btn').click(function () {
                if ($(this).hasClass('selected-btn')) {
                    $(this).removeClass('selected-btn');
                    isSelected = false;
                }else {
                    $(this).addClass('selected-btn');
                    isSelected = true;
                }
            });

            //60秒倒计时
            var wait = 60;
            function _time (a){
                if (wait === 0) {
                    a.text="获取验证码";
                    $(a).css("color","#000");
                    wait = 60;
                } else {
                    a.text= wait + "秒后重新发送";
                    $(a).css("color","#fff");
                    wait--;
                    setTimeout(function() {
                        _time(a);
                    },1000);
                }
            }
            // 发送短信验证码
            $('.getCode').click(function(){
                // 校验手机号
                var mobile = $('input[name=usr_phone]').val();
                if(!checkMobile(mobile)){
                    return;
                }
                //
                var obj = {
                    mobile
                };
                console.log('手机号:'+ mobile);

                if(wait === 60) {
                    _time(this);
                    $.ajax({
                        type: "post",
                        dataType: "jsonp",
                        url: 'http://user.rlm-cn.com/api/sms/send.m',
                        async: false,
                        data: obj,
                        jsonp: "callback",
                        success: function (data) {
                            console.log('发送短信验证码');
                            console.log(data);
                            if (data.code !== 200) {
                                alert(data.errorMsg);
                                wait = 0;//如果图片验证码错误，就把倒计时重置
                            }
                        }
                    });
                }
            });
            // 注册提交
            $('.submitReg').click(function(e) {
                $('.submitReg').prop("disabled", false);
                e.preventDefault();
                var mobile = $('input[name=usr_phone]').val();
                var smsCode = $('input[name=usr_code]').val();
                var fromUser = linkParam.fromUser;
                var password = $('input[name=usr_pwd]').val();
                var uName = decodeURI(linkParam.uName);
                var obj = {
                    mobile,
                    smsCode,
                    password,
                    fromUser,
                    uName
                };
                console.log('手机号：' + mobile + '验证码：' + smsCode + '密码：' + password + '推荐码：' + fromUser + '推荐人姓名：' + decodeURI(linkParam.uName));

                if(!checkMobile(mobile)){
                    $('.submitReg').prop("disabled", false);
                    return;
                }

                if(!checkValidCode(smsCode)){
                    $('.submitReg').prop("disabled", false);
                    return;
                }

                if(!checkPwd(password)){
                    $('.submitReg').prop("disabled", false);
                    return;
                }
                if (!isSelected){
                    alert('请阅读并同意注册协议');
                    return;
                }
                $.ajax({
                    type: "post",
                    dataType: "jsonp",
                    url: 'http://user.rlm-cn.com/user/register.m',
                    async: false,
                    data: obj,
                    jsonp: "callback",
                    success: function (data) {
                        console.log(data);
                        if(data.code == 200){
                            window.location.href = 'success.html';
                        }else{
                            alert(data.errorMsg);
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert('出错了');
                    }
                });
            });
            //下载
            $('.download-link-btn').click(function () {
                window.open("http://a.app.qq.com/o/simple.jsp?pkgname=com.nf.ewallet&fromcase=40003");
            });
        });

    </script>
</head>
<body>
<div class="content">
    <img class="img01" src="../../images/login/register/register01.png"/>
    <img class="img02" src="../../images/login/register/register02.png"/>
    <div class="userInfoBg">
        <div class="userInfoWhiteBg">
            <div class="referrer">
                <p>推荐人：<span class="referrerName"></span></p>
            </div>
            <div class="inputDiv">
                <input
                        class="phoneValue form-input"
                        maxlength=11
                        onkeyup="(this.mobileCheck=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)"
                        type="text"
                        placeholder="请输入手机号"
                        name="usr_phone" />
            </div>
            <div class="inputDiv">
                <input
                        class="codeValue form-input"
                        maxlength=6
                        onkeyup="(this.codeCheck=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)"
                        type="text"
                        placeholder="请输入验证码"
                        name="usr_code" />
                <a href="javascript:;" class="getCode">获取验证码</a>
            </div>
            <div class="inputDiv inputDivBgColor">
                <input
                        class="pwdValue form-input"
                        maxLength=16
                        onkeyup="(this.passWordCheck=function(){this.value=this.value.replace(/[^\w\S~.!@#$%^&*?-]+/,'');}).call(this)"
                        type="password"
                        placeholder="请输入密码"
                        name="usr_pwd" />
                <a href="javascript:;" class="pwd-show-btn"></a>
            </div>
            <div class="protocol">
                <a href="javascript:;" class="unselected-btn"></a>
                <a class="link" href="registerProtocol.html">《瑞联盟用户注册协议》</a>
            </div>
            <div class="btnDiv">
                <button class="submitReg">马上加入</button>
            </div>
        </div>
    </div>
    <div class="download-link">
        <button class="download-link-btn">下载瑞联盟</button>
    </div>
</div>
</body>
</html>